<!-- //风机告警 -->
<template>
	<uv-navbar :fixed="false" :title="title" left-arrow @leftClick="$onClickLeft" />

	<view class="container">
		<view class="bg-white">
			<uv-tabs :list="tabList" :current="current" @change="change" keyName="name" :scrollable="false"></uv-tabs>
		</view>
		<view class="orders-list" style="">
			<template v-if="alarmList && alarmList.length > 0">
				<view class="level-list" v-for="item in alarmList" :key="item.id" @click="goToAlarmMes(item)">
					<view class="custom-component1">
						<view class="mark">
							<view class="iconfont cus-circle" :class="{
				            'alarming': item.alarmStatus == '告警中',
				            'recovered': item.alarmStatus == '已恢复',
				            'ignored': item.alarmStatus == '已忽略'
				          }"></view>
						</view>
					</view>



					<view class="list-left">{{item.name || item.alarmType}}</view>

					<view class="time">{{item.createTime || item.alarmStartTime}}</view>
					<view class="list-right">
						<uv-icon name="arrow-right"></uv-icon>
					</view>

				</view>

			</template>

			<template v-else>
				<uv-empty mode="data" icon="empty-data"></uv-empty>
			</template>

		</view>

	</view>
</template>

<script setup>
	import {
		ref,
		computed,
		onMounted,
		reactive,
		getCurrentInstance
	} from 'vue'
	import {
		onLoad,
		onPullDownRefresh,
		onReachBottom
	} from '@dcloudio/uni-app'

	import {
		alarmMap
	} from "@/utils/mapping/alarmMap"
	const title = ref('告警管理')
	const tabList = ref([{
		type: 1,
		name: '发生中',
	}, {
		type: 0,
		name: '已恢复',
	}, {
		type: 2,
		name: '已忽略'
	}, ])
	const current = ref(0)
	const alarmId = ref(null)
	const moduleId = ref(null)
	const alarmList = ref([{

	}, ])
	const currentIndex = ref(1)
	const queryParams = reactive({
		"pageNum": 1,
		"pageSize": 10,
		"alarmStatus": null,
		"queryObj": {
			"powerStation": "",
			"name": "",
			"equipment": "",
			"beginTime": "",
			"endTime": "",
			"grade": "",
			"alState": "",
			"dzId": null
		}
	})
	//切换tabs
	const change = (e) => {
		queryParams.pageNum = 1 /*  */
		const map = new Map()
		map.set(0, '告警中')
		map.set(1, '已恢复')
		map.set(2, '已忽略')
		currentIndex.value = e?.index ?? 0

		queryParams.alarmStatus = map.get(currentIndex.value)

		goAlarmMes(true)
	}
	//跳转到报警详情
	const goToAlarmMes = (val) => {
		alarmId.value = val.id

		if (moduleId.value == 2 || moduleId.value == 5) {
			uni.navigateTo({
				url: "/pages/components/pages/alarm/pvDetail",
				success: (res) => {
					res.eventChannel.emit('getAlarmId', {
						alarmId: alarmId.value,
					})
				}
			}, )
			return;
		} else {
			uni.navigateTo({
				url: "/pages/components/pages/alarm/detail",
				success: (res) => {
					res.eventChannel.emit('getAlarmId', {
						alarmId: alarmId.value,
						rowData: val
					})
				}
			}, )
			return;
		}

	}
	//跳转具体告警
	const goAlarmMes = async (isRefresh = false) => {

		uni.showLoading({
			title: '加载中'
		})
		if (isRefresh) {
			alarmList.value = []
			queryParams.pageNum = 1
		}
		const {
			data
		} = await alarmMap(queryParams, moduleId.value)

		// console.log("模块函数", alarmMap(queryParams, moduleId.value))
		let alarmData = data.data.list || []
		if (alarmData && alarmData.length > 0) {
			alarmList.value = alarmList.value.concat(alarmData)
			queryParams.pageNum += 1
		}
		uni.stopPullDownRefresh();
		uni.hideLoading()
	}

	// 控制是否显示圆球
	const showCircle = (item) => {
		return ['已恢复', '发生中', '已忽略'].includes(item.alarmStatus);
	}


	// 根据 alarmStatus 返回背景颜色
	const circleColor = (item) => {
		switch (item.alarmStatus) {
			case '已恢复':
				return '#41d068';
			case '发生中':
				return '#e42214';
			case '已忽略':
				return '#9c9393';
			default:
				return ''; // 默认颜色或处理其他状态
		}
	};
	onMounted(() => {
		// goAlarmMes(true)
		change()
	})
	onLoad(() => {
		moduleId.value = uni.getStorageSync('zh-h5-select-module')
		const instance = getCurrentInstance().proxy
		const eventChannel = instance.getOpenerEventChannel()
		eventChannel.on('getModelId', (data) => {

		})
	})
	onPullDownRefresh(() => {
		goAlarmMes(false)
	})
	onReachBottom(() => {
		goAlarmMes(false)
	})
</script>

<style lang="scss" scoped>
	.uv-navbar {
		position: fixed;
		top: 0;
		width: 100%;
		z-index: 3;
	}

	.container {
		background-color: #f7f9fa;

		.bg-white {
			position: fixed;
			top: 6.5vh;
			width: 100%;
			z-index: 3;
		}

		.orders-list {
			padding: 20rpx;
			padding-top: 180rpx;
			padding-bottom: 0;

			.level-list {
				display: flex;
				height: 135rpx;
				line-height: 120rpx;
				border-bottom: 1rpx solid #DCDCDD;
				justify-content: space-between;
				align-items: center;

				.custom-component1 {
					flex: 0.6;

					.mark {
						.cus-circle {
							width: 20rpx !important;
							height: 20rpx !important;
							border-radius: 50%;
							font-size: 20rpx;
							margin-right: 6rpx;


						}

						.cus-circle.alarming {
							background: #e42214;
						}

						.cus-circle.recovered {
							background: #41d068;
						}

						.cus-circle.ignored {
							background: #9c9393;
						}
					}
				}

				.list-left {
					flex: 2;
					font-size: 30rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 500;
					margin-left: -7%;
					color: rgba(0, 0, 0, 0.8);
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
					width: 80rpx;
				}

				.time {
					flex: 2;
					font-size: 25rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 500;
					color: rgba(71, 67, 67, 0.8);
				}

				.list-right {
					font-size: 34rpx;
					font-family: SFPro-Semibold, SFPro;
					font-weight: 600;
					color: rgba(60, 60, 67, 0.3);
				}
			}
		}

	}
</style>